<script>
import rules from './formRules'
import AlbumWithUpload from '@/components/Album/albumWithUpload.vue'
import { deepClone } from '@/utils/index'

export default {
  components: {
    AlbumWithUpload
  },
  props: {
    value: {
      type: Object,
      required: true,
      default() {
        return {
          address: '',
          number: 1,
          rent: 0,
          photos: []
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    fieldsDisabled: {
      type: Array
    },

    // KRIS:TEMP
    urls: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // form: {
      //     address: '',
      //     number: 1,
      //     rent: 0,
      //     photos: []
      // },
      formRules: rules,

      // Loading status
      isFetchingApartments: false
    }
  },
  computed: {
    fieldsDisabledFormatted() {
      return Array.isArray(this.fieldsDisabled) ? this.fieldsDisabled : []
    },
    form: {
      get() {
        return this.value
      },
      set() {
        this.$emit('input', deepClone(this.value))
      }
    }
  },
  watch: {
    urls(v) {
      console.log('change', v)
    }
  },
  methods: {
    validate() {
      return new Promise((resolve) => {
                this.$refs.form?.validate(flag => {
                  resolve(flag)
                })
      })
    },
    resetFields() {
      this.$refs.form?.resetFields?.()
      this.$refs['album-with-upload']?.clear()
    },
    numberInput(number) {
      const num = parseInt(number)
      this.form.number = isNaN(num) ? 0 : num
    },
    rentInput(rent) {
      const num = parseFloat(rent)
      this.form.rent = isNaN(num) ? 0 : num
    },

    emitChangeEvent() {
      this.$emit('input', deepClone(this.form))
    }
  }
}
</script>

<template>
  <div class="room-form-container">
    <el-form
      ref="form"
      v-loading="loading"
      label-position="top"
      label-width="80px"
      :disabled="disabled"
      :model="form"
      :rules="formRules"
    >
      <el-form-item label="宿舍地址" prop="address">
        <el-input
          v-model="form.address"
          placeholder="请输入宿舍地址"
          :disabled="fieldsDisabledFormatted.includes('address')"
          @change="emitChangeEvent"
          @clear="emitChangeEvent"
        />
      </el-form-item>

      <!-- <el-form-item label="可住人数" prop="number">
                <el-input
                    type="number"
                    :value="form.number"
                    placeholder="请输入可住人数"
                    :disabled="fieldsDisabledFormatted.includes('number')"
                    @input="numberInput"
                    @change="emitChangeEvent"
                    @clear="emitChangeEvent"
                />
            </el-form-item> -->

      <el-form-item label="租金" prop="rent">
        <el-input
          type="number"
          :value="form.rent"
          placeholder="请输入租金"
          :disabled="fieldsDisabledFormatted.includes('rent')"
          @input="rentInput"
          @change="emitChangeEvent"
          @clear="emitChangeEvent"
        />
      </el-form-item>

      <el-form-item label="图片(最多八张)" prop="photos">
        <!-- <Album /> -->
        <AlbumWithUpload ref="album-with-upload" :maxSize="8" :row-size="5" :urls.sync="urls" :pictures.sync="form.photos" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss">
    .photos-container {
        border-radius: 6px;
        background-color: #f0f0f0;
        height: 100px;
    }
</style>
